import React, { Component } from 'react';
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import VideoPlayer from "@/components/VideoPlayer"
import { getDateTime2 } from '@/utils/getDate'
import { apiGetMemberWalletWebRecordPage } from '@/request/wallet/userBalance.js'
import store from "@/store/store"
import _ from 'lodash';
import GoBack from '@/components/TheGoBack'

import { Space, Modal, Input } from "antd";

const { TextArea } = Input;

class screenAD extends React.Component {  
    state = {
        columns: [
            {
                title: "业务编号",
                dataIndex: "walletRecordCode",
                key: "walletRecordCode",
            },
            {
                title: "收支类型",
                dataIndex: "type",
                key: "type",
                render: (text, render) => {
                    let label = ''
                    switch (text) {
                        case "S":
                            label = "收入"
                            break;
                        case "Z":
                            label = "支出"
                            break;
                        case "D":
                            label = "冻结"
                            break;
                        case "J":
                            label = "解冻"
                            break;
                        default:
                            label = "字段值错误"
                    }
                    return label + '-' + { CZ: "充值", "HB": "红包", "ZZ": "转账", "TX": "提现", "TH": "提现退回", "QT": "其他" }[render.dealType]
                }
            },
            {
                title: "明细",
                dataIndex: "recordType",
                key: "recordType",
                render: (text, render) => {
                    const arr = {
                        CZSR: "充值收入", HBSR: "红包收入", HBTH: "红包退回", ZZSR: "转账收入", ZZTH: "转账退回", TXTH: "提现退回", QTSR: "其他收入", TXZC: "提现支出", HBZC: "红包支出", ZZZC: "转账支出", QTZC: "其他支出", RGCZ: "人工操作"
                    }
                    return arr[text]
                }
            },
            {
                title: "时间",
                dataIndex: "createTime",
                key: "createTime",
            },
            {
                title: "金额",
                dataIndex: "changePrice",
                key: "changePrice",
                render: text => text && <React.$price price={text} />,

            },
            {
                title: "变更后余额",
                dataIndex: "afterChangePrice",
                key: "afterChangePrice",
                render: text => text && <React.$price price={text} />,
            },
            {
                title: "备注",
                dataIndex: "remark",
                key: "remark",
            },
        ],
        dataSource: [],
        search:"",
        pageData: {
            pageNo: 1,
            pageSize: 10,
        },
        total: 0,
        newColumns: [],
        form_show: true,
        searchOption: [
            {
                field: 'walletRecordCode',
                label: '业务编号',
                placeholder: '请输入',
                required: false,
                rules: [],
                type: 'Input',
                defaultValue: ''
            },
            {
                field: 'type',
                label: '收支类型',
                placeholder: '请选择',
                required: false,
                tooltip:"收支类型和明细互斥，避免一起筛选",
                rules: [],
                type: 'Cascader',
                option: [
                    {
                        label: '收入',
                        value:"收入",
                        children: [
                            {
                                value: 'CZSR',
                                label: '充值',
                            },
                            {
                                value: 'HBSR',
                                label: '红包',
                            },
                            {
                                value: 'ZZSR',
                                label: '转账',
                            },
                            {
                                value: 'TXTH',
                                label: '提现退回',
                            },
                            {
                                value: 'QTSR',
                                label: '其它',
                            },
                        ],
                    },
                    {
                        label: '支出',
                        value:"支出",
                        children: [
                            {
                                value: 'TXZC',
                                label: '提现',
                            },
                            {
                                value: 'HBZC',
                                label: '红包',
                            },
                            {
                                value: 'ZZZC',
                                label: '转账',
                            },
                            {
                                value: 'QTZC',
                                label: '其他',
                            },
                        ],
                    },
                ]
            },
            {
                field: 'time',
                label: '时间',
                placeholder: '请选择',
                required: false,
                rules: [],
                type: 'RangePicker',
                showTime: true
            },
            {
                field: 'totalType',
                label: '类型',
                placeholder: '请选择',
                required: false,
                rules: [],
                type: 'Select',
                options: [{ value: "", label: '全部' }, { value: "HB", label: '红包' }, { value: "ZZ", label: '转账' }, { value: "TX", label: '提现' }, { value: "CZ", label: '充值' }, { value: "QT", label: '其它' }],
                defaultValue: '全部'
            },
            {
                field: 'recordType',
                label: '明细',
                placeholder: '请选择',
                required: false,
                rules: [],
                type: 'Select',
                options: [
                    { value: "", label: '全部' },
                    { value: "CZSR", label: '充值收入' },
                    { value: "HBSR", label: '红包收入' },
                    { value: "HBTH", label: '红包退回' },
                    { value: "HBZC", label: '红包支出' },
                    { value: "ZZSR", label: '转账收入' },
                    { value: "ZZTH", label: '转账退回' },
                    { value: "ZZZC", label: '转账支出' },
                    { value: "TXTH", label: '提现退回' },
                    { value: "TXZC", label: '提现支出' },
                    { value: "QTZC", label: '其它支出' },
                    { value: "QTSR", label: '其它收入' },
                ],
                defaultValue: '全部'
            },
        ],
        queryForm: {},
        stopReason: '',
        isvideoModalVisible: false,
        videoAddress: ""
    };

    componentDidMount() {
        this.getData()
    };

    // 获取表格数据
    getData = async (values) => {
        const { id } = this.props.match.params

        let { pageNo, pageSize } = this.state.pageData
        if (values && !_.isEmpty(values.time)) {
            values.startDate = getDateTime2(values.time[0])
            values.endDate = getDateTime2(values.time[1])
            delete values.time
        }
        if (values && !_.isEmpty(values.type)) {
            values.type =  values.type[1]
        }
        this.setState({
            queryForm: values === undefined ? this.state.queryForm : { ...values }
        }, async () => {
            let { time, ...form } = { ...this.state.queryForm }
            const params = {
                pageNo,
                pageSize,
                ...values,
                memberId: parseInt(id) 
            }
            let res = await apiGetMemberWalletWebRecordPage(params)
            if (res.code === 0 && res.data) {
                this.setState({
                    dataSource: res.data,
                    pageData: {
                        pageNo: res.pageNo,
                        pageSize: res.pageSize
                    },
                    total: res.totalCount,
                })
            }
        })

    };

    onStopAreaChange = (e) => {
        // console.log('Change:', e.target.value);
        this.setState({
            stopReason: e.target.value
        })
    };

    //
    videoDialog = (e) => {
        this.setState({
            isvideoModalVisible: true,
            videoAddress: e
        })
    }
    videoOk = async () => {
        this.setState({
            isvideoModalVisible: false,
            videoAddress: ""
        })
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => {
            this.getData(this.state.queryForm)
        })
    };

    onReset() {
        this.setState({
            queryForm: {}
        }, () => {
            this.pageChange(1, 10)
        })
    }

    onColumnsFilter(value) {
        this.setState({
            newColumns: value
        })
    }

    onFormSearch(values) {
        this.setState({
            queryForm:values,
            pageData: { pageNo: 1, pageSize: 10 }
        }, () => {
            this.getData(values)
        })
    }

    render() {
        const {
            columns,
            dataSource,
            pageData: { pageNo, pageSize },
            total,
            searchOption,
            form_show,
            newColumns,
            isvideoModalVisible, videoAddress
        } = this.state;
        return (
            <div className={"p-layout-box commodity-content"}>
                <GoBack history={this.props.history} title="" />

                <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
                    onGetValues={(values) => this.onFormSearch(values)}
                    onReset={(values) => this.onReset(values)}
                >
                </TheQueryForm>
                余额变动
                <TheTableExtend
                    columns={columns}
                    onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
                    onTableRefresh={() => this.getData()}
                    onColumnsFilter={(value) => this.onColumnsFilter(value)}
                >

                </TheTableExtend>
                <TheTable
                    columns={newColumns}
                    dataSource={dataSource}
                    rowKey={'configCarouselId'}
                />
                <ThePagination
                    pageNo={pageNo}
                    pageSize={pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
                {isvideoModalVisible ?
                    <Modal visible={isvideoModalVisible} onOk={this.videoOk} onCancel={this.videoOk}>
                        <VideoPlayer src={videoAddress} />
                    </Modal> : null}
            </div>
        );
    }
}

export default screenAD;
